<template>
    <div class="role">
        <el-row>
            <el-col :span="12">
                <div style="display: flex">
                    <el-form :inline="true" :model="search">
                        <el-form-item label="角色名称">
                            <el-input v-model="search.name" placeholder="请输入角色姓名"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                            <el-button plain @click="onReset">清空</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
            <el-col :span="12">
                <div style="display: flex;flex-direction:row-reverse">
                    <el-button type="primary" plain v-if="hasPrivilege('role:add')" @click="addRole">添加角色
                    </el-button>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <div style="display: flex">
                    <el-button style="margin-bottom: 10px" plain @click="selectionCancel">取消勾选</el-button>
                    <el-button style="margin-bottom: 10px" type="danger" v-if="hasPrivilege('role:delete')"
                        @click="deleteBatch">批量删除
                    </el-button>
                </div>
            </el-col>
        </el-row>
        <el-table ref="multipleTable" :data="tableData" border stripe @selection-change="selectionChange"
            style="width: 100%">
            <el-table-column type="selection">
            </el-table-column>
            <el-table-column prop="name" label="角色名称">
            </el-table-column>
            <el-table-column prop="description" label="角色描述">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间">
            </el-table-column>
            <el-table-column label="操作">
                <template v-if="scope.row.id != 1" slot-scope="scope">
                    <el-button type="primary" plain size="mini" v-if="hasPrivilege('role:edit')"
                        @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button type="primary" plain size="mini" v-if="hasPrivilege('role:assignPrivilege')"
                        @click="assignPrivilege(scope.$index, scope.row)">分配权限
                    </el-button>
                    <el-button type="danger" plain style="margin-right: 10px" size="mini"
                        v-if="hasPrivilege('role:delete')" @click="deleteRole(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :page-sizes="[10, 50, 100, 200]" :page-size="search.size"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <RoleEditor @refreshRow="refreshRow" ref="roleEditorDialog" />
        <PrivilegeEditor ref="privilegeEditorDialog" />
    </div>
</template>


<script>

import { systemApi, commonApi } from "../../api/api";
import form from "@/utils/form";
import RoleEditor from "./RoleEditor";
import PrivilegeEditor from "./PrivilegeEditor";
import tables from "@/utils/tables";

export default {
    components: {
        RoleEditor,
        PrivilegeEditor
    },
    mixins: [
        tables, form
    ],
    data() {
        return {
            tableData: [],
            total: 0,
            search: {
                name: '',
                size: 10,
                current: 1
            },
            multipleSelection: []
        }
    },
    created() {
        this.onSubmit();
    },
    methods: {
        onSubmit() {
            commonApi.page("role", this.search).then(res => {
                this.loadPage(res)
            }
            )
        },
        addRole() {
            this.$refs['roleEditorDialog'].setData("dialogFormVisible", true)
                .setData("type", 1).setData("form", {})
            sessionStorage.removeItem("validator.rolename")
        },
        handleEdit(index, row) {
            this.$refs['roleEditorDialog'].setData("dialogFormVisible", true)
                .setData("type", 2)
                .setData("form", { ...row })
                .setData("index", index);
            sessionStorage.setItem("validator.rolename", row.name)

        },
        assignPrivilege(index, row) {
            this.$refs['privilegeEditorDialog']
                .setData("dialogVisible", true)
                .setData("row", row);
        },
        selectionChange(selection) {
            selection.forEach(row => {
                if (row.id == 1) {
                    this.$refs["multipleTable"].toggleRowSelection(row, false);
                }
            })
            this.multipleSelection = selection.filter(e => {
                return e.id != 1
            })
        },
        selectionCancel() {
            this.$refs["multipleTable"].clearSelection();
        },
        deleteBatch() {
            if (this.multipleSelection.length > 0) {
                let ids = this.multipleSelection.map(e => e.id);
                this.confirmPopover(this.deleteRequest, { roleIds: ids })
            }
        },
        confirmPopover(deleteRequest, data) {
            this.confirmOperation('此操作将永久删除角色, 是否继续?',this.deleteRequest,data)
        },
        deleteRole(index, row) {
            this.confirmPopover(this.deleteRequest, { roleIds: [row.id] })
        },
        deleteRequest(data) {
            systemApi.batchDeleteRole(data).then(result => {
                this.onSubmit()
                commonApi.popoverSuccessMessage(result)
            }, commonApi.popoverErrorMessage).catch(commonApi.popoverErrorMessage)
        }
    }
}
</script>

<style lang="scss" scoped>
.role {
    .block {
        margin: 20px;
        float: right;
    }

}
</style>